<template>
  <!-- 可以存在多个根节点 -->
  <div>1</div>
  <div>
    <h3>{{ count }}</h3>
    <h3>{{ doubleCount }}</h3>
    <button @click="addCount">+1</button>
    <hr>
    <h2 @click="flag=!flag">{{ flag ? '真' : '假' }}</h2>
    <ul>
      <li v-for="(v, i) in list" :key="i">{{ v }}</li>
    </ul>
    <hr>
    <h1>{{ num }}</h1>
    <h1>{{ doubleNum }}</h1>
    <button @click="addNum">+1</button>
  </div>
</template>


<script>
import { reactive, ref, toRefs, computed, watch, onMounted } from "vue"
import axios from 'axios'
export default {
  // 组合api
  setup() {
    // 声明响应式数据
    const count = ref(1)
    // 声明响应式数据
    const o = reactive({
      flag: true,
      list: ['a', 'b', 'c', 'd']
    })
    // 声明方法函数
    const addCount = () => {
      // 访问或者修改ref声明的变量的时候
      // 需要访问其 .value
      count.value++
    }
    // 声明计算属性 
    const doubleCount = computed(() => count.value * 2)
    // 声明侦听属性
    watch(count, (newValue, oldValue) => {
      console.log('count 改变前: ' + oldValue)
      console.log('count的值发生了改变！！！！')
      console.log('count 改变后: ' + newValue)
    })
    // 生命周期钩子函数
    onMounted(async () => {
      console.log(' 生命周期钩子函数执行')
      const resp = await axios.get('/api/list')
      console.log(resp.data)
    })

    // 必须返回数据
    return {
      count,
      addCount,
      // 将reactive 声明的响应式数据
      // 以键值对形式抛出， 并且不会丢失其响应式的特性
      ...toRefs(o),
      doubleCount
    }
  },
  data() {
    return {
      num: 123
    }
  },
  methods: {
    addNum() {
      this.num++
    }
  },
  computed: {
    doubleNum() {
      return this.num * 2
    }
  }
}
</script>